@extends('student._layouts.app')
@section('css')
    <style>
        .message-list {
            position: absolute;
            top: 99px;
            width: 100%;
            margin-bottom: 50px;
            /*height: 200px;*/
            overflow:scroll;
        }

        .message {
            display: block;
            width: auto;
            height: auto;
            overflow: hidden;
            margin: 10px 10px 0 10px;

        }
        .student, .teacher {
            display: inline-block;
            width: auto;
            max-width: 71%;
            height: auto;
            padding: 5px 10px 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            line-height: 30px;
        }
        .student {
            float: right;
            background-color: #1AAD19;

        }
        .teacher {
            float: left;
            background-color: #fff;
        }
        .input-area {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 40px;
            background-color: #ececec;

        }
        .input {
            display: inline-block;
            float: left;
            width: 80%;
            height: 40px;
            outline: none;
            line-height: 40px;
            font-size: 14px;
            border: none;
            padding: 0 0 0 10px;
            box-sizing: border-box;
            border-radius: 2px;

        }

        .send {
            display: inline-block;
            float: right;
            width: 16%;
            height: 34px;
            margin: 3px 7px 0 0;
            background-color: #fff;
            border: 0;
            border-radius: 2px;
            font-size: 14px;
            outline: none;

        }
    </style>
@endsection


@section('content')
    <section class="tabs">
        <a class="tab active">留言</a>
        <a class="tab" href="/teacher/class/{{ $class_id }}/work">作业</a>
        <a class="tab" href="/teacher/class/{{ $class_id }}/attendance">签到</a>
    </section>

    <section class="message-list">
        @foreach($messages as $message)
            <div class="message">
                <span class="{{ $message->teacher_id !== 0 ? 'teacher' : 'student' }}">{{ $message->content }}</span>
            </div>
        @endforeach

    </section>

    <section class="input-area">
        <input type="text" class="input" v-model="content" placeholder="请输入内容">
        <button class="send" @click="send">发送</button>
    </section>


@endsection

@section('js')
    <script src="{{ asset('js/vue.dev.js') }}"></script>
    <script src="{{ asset('js/axios.dev.js') }}"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                title: '爱尚课',
                content: '',
            },
            mounted() {

            },
            methods: {
                send() {
                    let that = this

                    //document.getElementsByClassName('message-list')[0].scrollTop = document.getElementsByClassName('message-list')[0].scrollHeight;
                    //console.log(location.href)
                    if (that.content.length === 0) {
                        alert('发送内容不可为空')
                        return
                    }
                    axios({
                        method: 'post',
                        url: '/teacher/class/{{ $class_id }}/sendmessage',
                        timeout: 2000,
                        data: {
                            student_id: '{{ $student_id }}',
                            content: that.content
                        }
                    })
                        .then(function (response) {
                            alert(response.data.message)
                            if (response.data.code === 200) {
                                window.location.reload()
                            }

                        })
                        .catch(function (response) {
                            console.log(response)
                        })
                }
            }

        })

    </script>
@endsection
